<template>
  <div>
    <t-button size="small" @click="OnClick" theme="warning">
      <template #icon>
        <SettingIcon/>
      </template>
      设置商品单价
    </t-button>

    <t-drawer v-model:visible="data.show" :header="`设置商品【${data.formData.key}】单价`" :closeOnOverlayClick="false"
              :on-confirm="handleConfirm" @close="handleClose" size="large" destroy-on-close confirmBtn="确认修改单价">
      <div>
        <t-space direction="vertical" style="width: 100%;" v-if="props.db.name">
          <div>
            <h1>{{ props.db.key }} {{ props.db.name }}</h1>
            <p class="intro">
              {{ props.db.intro }}
            </p>
          </div>
          <t-input-adornment prepend="VIP1的单价">
            <t-input-number v-model="data.formData.vip_1" :step="0.1"/>
          </t-input-adornment>
          <t-input-adornment prepend="VIP2的单价">
            <t-input-number v-model="data.formData.vip_2" :step="0.1"/>
          </t-input-adornment>
          <t-input-adornment prepend="VIP3的单价">
            <t-input-number v-model="data.formData.vip_3" :step="0.1"/>
          </t-input-adornment>
          <t-input-adornment prepend="VIP4的单价">
            <t-input-number v-model="data.formData.vip_4" :step="0.1"/>
          </t-input-adornment>
          <t-input-adornment prepend="VIP5的单价">
            <t-input-number v-model="data.formData.vip_5" :step="0.1"/>
          </t-input-adornment>
          <t-input-adornment prepend="VIP6的单价">
            <t-input-number v-model="data.formData.vip_6" :step="0.1"/>
          </t-input-adornment>
        </t-space>
      </div>
    </t-drawer>
  </div>
</template>
<script lang="ts" setup>
import {SettingIcon} from "tdesign-icons-vue-next";
import {reactive} from "vue";
import api from "../../../../api/api";
import NotificationPlugin from "tdesign-vue-next/es/notification/plugin";


const props = defineProps(['db'])
const emits = defineEmits(['success'])
const data = reactive({
  show: false,
  formData: {
    key: "",
    vip_1: 0,
    vip_2: 0,
    vip_3: 0,
    vip_4: 0,
    vip_5: 0,
    vip_6: 0,
  }
})

const OnClick = async () => {
  data.show = true
  data.formData.key = props.db.key
  data.formData.vip_1 = props.db.vip_1
  data.formData.vip_2 = props.db.vip_2
  data.formData.vip_3 = props.db.vip_3
  data.formData.vip_4 = props.db.vip_4
  data.formData.vip_5 = props.db.vip_5
  data.formData.vip_6 = props.db.vip_6
}

const handleClose = () => {
  data.show = false
}

const handleConfirm = async () => {
  let res = await api.Admin.Product.SettingProduct({
    key: data.formData.key,
    vip_1: data.formData.vip_1,
    vip_2: data.formData.vip_2,
    vip_3: data.formData.vip_3,
    vip_4: data.formData.vip_4,
    vip_5: data.formData.vip_5,
    vip_6: data.formData.vip_6,
  })
  if (res != null) {
    data.show = false
    await NotificationPlugin.success({
      title: '修改价格成功',
      content: `修改【${data.formData.key}】的单价成功。`
    })
    emits("success")
  }
}
</script>